<template>
  <div>
    <!-- 按钮 -->
    <div class="topBtn">
      <div class="sizeBig"><span>设备</span></div>
      <div style="float: right;margin-right:20px">
        <el-button type="primary" @click="forbidden" style="height:36px;">
          <i class="icon-jiny"></i>禁用
        </el-button>
        <el-button type="primary" @click="Enable" style="height:36px;width:90px;">
          <i class="icon-qiy"></i>启用
        </el-button>
        <el-button type="primary" @click="add()">
          <i class="iconfont icon-addNew"></i> 新增
        </el-button>
        <el-button type="primary" @click="edit()" icon="el-icon-edit">修改</el-button>
        <el-button type="primary" @click="remove()" icon="el-icon-delete">删除</el-button>
      </div>
    </div>
    <div class="message">
      <p class="character">
        设置车间生产线体及线体上需要绑定的设备。
        <span class="skip">查看帮助文档</span>
      </p>
    </div> 

    <!-- 搜索 -->
    <div class="inputcontent">
      <el-input v-model="search" placeholder="请输入内容" class="inSearch" @keydown.native.enter="init"></el-input>
      <div class="iconSearch"></div>
    </div>

    <!-- 表格 -->
    <div class="tablesize">
      <Table :reset="reset" v-on:getId="getListId" id="out-table" v-on:changeData="changedata"></Table>
    </div>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,20,50,100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="TotalNum">
      </el-pagination>
    </div>

    <!-- 新增弹出框 -->
    <el-dialog title="新增数据" :visible.sync="addDialogVisible" width="600px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="ruleForm.name" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="设备编码" prop="code">
          <el-input v-model="ruleForm.code" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceType">         
          <el-select v-model="ruleForm.deviceType" placeholder="请选择设备类型" style="width:350px">          
            <!-- <el-option  label="0" value="0"></el-option> -->
            <el-option 
            v-for="item in options"
            :key="item.value"
            :label="item.label" 
            :value="item.value"
            ></el-option>
          </el-select>   
        </el-form-item>
        <el-form-item label="工位" prop="workstationId">
          <el-select v-model="ruleForm.workstationId" placeholder="请选择工位" style="width:350px">
            <el-option 
            v-for="(item,index) in workstationList"
            :key="index"
            :label="item.Name " 
            :value="item.WorkstationId"
            ></el-option>
          </el-select>   
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="存储文件路径" prop="filePath">      
          <!-- <el-input v-model="ruleForm.filePath" style="width:350px" type="file" webkitdirectory multiple ></el-input>-->
          <el-select v-model="ruleForm.filePath" placeholder="请选择存储文件路径" style="width:350px">            
            <!-- <el-option  label="D:\\" value="D:\\"></el-option> -->
            <el-option 
            v-for="item in options1"
            :key="item.value"
            :label="item.label" 
            :value="item.value"
            ></el-option>       
          </el-select>
        </el-form-item>
        <el-form-item label="设备序列号" prop="serviceTag">
          <el-input v-model="ruleForm.serviceTag" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDialogVisible =  false">关闭</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改弹出框 -->
    <el-dialog title="修改数据" :visible.sync="editDialogVisible" width="600px">
      <el-form
        :model="editInfo"
        :rules="rules"
        ref="editForm"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="设备ID" prop="deviceID" v-show="false">
          <el-input v-model="editInfo.deviceID" style="width:350px" disabled></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="editInfo.name" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="设备编码" prop="code">
          <el-input v-model="editInfo.code" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceType">
          <el-select v-model="editInfo.deviceType" placeholder="请选择设备类型" style="width:350px">
            <!-- <el-option  label="0" value="0"></el-option> -->
            <el-option 
              v-for="item in options"
              :key="item.value"
              :label="item.label" 
              :value="item.value"
            ></el-option>
          </el-select>   
        </el-form-item>
        <el-form-item label="工位ID" prop="workstationId">
          <el-select v-model="editInfo.workstationId" placeholder="请选择工位ID" style="width:350px">
            <el-option 
            v-for="(item,index) in workstationList"
            :key="index"
            :label="item.Name " 
            :value="item.WorkstationId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="editInfo.remark" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="存储文件路径" prop="filePath">
          <!-- <el-input v-model="editInfo.filePath" style="width:350px" type="file" webkitdirectory multiple ></el-input> -->
          <el-select v-model="editInfo.filePath" placeholder="请选择存储文件路径" style="width:350px">  
            <!-- <el-option  label="D:\" value="D:\"></el-option> -->
            <el-option 
              v-for="item in options1"
              :key="item.value"
              :label="item.label" 
              :value="item.value"
            ></el-option>
          </el-select>   
        </el-form-item>
        <el-form-item label="设备序列号" prop="serviceTag">
          <el-input v-model="editInfo.serviceTag" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="editDialogVisible=false">关闭</el-button>
          <el-button type="primary" @click="editSubmitForm('editForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getDeviceList, insertDevice,updateDevice,removeDevice,startOrStopDevice } from "@/api/facility";
import {getWorkStationList} from "@/api/station"
import Table from "./components/facilityTable";
import {delay} from '@/utils/autoSearch'

export default {
  name: "facility",
  components: {
    Table
  },
  data() {
    return {
      search: "", //搜索
      input: "",
      options:[
        {
          value:0,
          label:'未知设备'
        },
        {
          value:1,
          label:'印刷输出设备'
        },
      ],
      options1:[
        {
          value:"D:\\Print",
          label:"D:\\Print"
        }
      ],
      reset: [],
      workstationList:[],

      currentPage: 1, //初始页
      size:10,
      TotalNum:0, //数据总条数
      
      addDialogVisible: false, //新增弹出框
      editDialogVisible: false, //修改弹出框
      checkIds: [], //勾选的id数组
      addlist: [], //勾选传过来的数据
      ruleForm: {
        name: "", 
        code: "", 
        deviceType: "", 
        workstationId: "" ,
        remark:'',
        filePath:"",
        serviceTag:""
      },
      editInfo: {
        deviceID:"",
        name: "", 
        code: "", 
        deviceType: "", 
        workstationId: "" ,
        remark:'',
        filePath:"",
        serviceTag:""
      },
      rules: {
        name: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入设备编码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        deviceType: [
          { required: true, message: "请输入设备类型", trigger: "blur" },
          
        ],
        workstationId: [
          { required: true, message: "请输入工位ID", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "请输入备注", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        filePath: [
          { required: true, message: "请输入存储文件路径", trigger: "blur" },
        
        ],
        serviceTag: [
          { required: true, message: "请输入设备序列号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    //用来监听页面变量的改变
    //监听搜索，300ms执行一次fetchData方法（去搜索）
    search() {
      delay(() => {
        this.fetchData();
      }, 300);
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    // 自动搜索的方法
    async fetchData(val){
      this.init({keyName:this.search})
    },
    handleSizeChange(size){
      this.size = size
      getDeviceList({ keyName:this.search,page:1,pageSize:this.size }).then(res=>{
        if(parseInt(res.Code) === 1){
          this.reset = res.Result.Items;
        }
      })  
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage
      getDeviceList({ keyName:this.search,page:this.currentPage,pageSize:this.size }).then(res=>{
        if(parseInt(res.Code) === 1){
          this.reset = res.Result.Items;
        }
      })
    },
    //请求数据
    init() {
      
      getDeviceList({keyName: this.search,page:1,pageSize:10}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.reset = res.Result.Items;
          this.TotalNum = res.Result.TotalNum
        }
      });
      
      
    },
    // 新增
    add() {
      this.ruleForm = {};
      this.addDialogVisible = true;   
      getWorkStationList({keyName: this.search,page:1,pageSize:1000}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.workstationList = res.Result.Items;         
        }
      })  
    },   
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertDevice(this.ruleForm).then(res=>{
            if(parseInt(res.Code) === 1){
                this.$message({
                  type: 'success',
                  message: '新增成功!'
                })    
                this.init();
                this.addDialogVisible = false;
            }
          })  
         } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    getListId(listId) {
      this.checkIds = listId;
    },
    changedata(data) {
      this.addlist = data;
    },
    // 禁用
    forbidden() {
      if(this.addlist.length>0){
        if(this.addlist[0].IsEnable === 0){
          this.$message('已禁用')
        }else{
          let data = { deviceID:this.checkIds[0],isEnable:0}
          startOrStopDevice(data).then(res=>{
            if (parseInt(res.Code) === 1) {
              this.$message({
                type: 'success',
                message: '禁用成功!'
              })
              this.init()
            }
          })
        }      
      }else{
        this.$message('请勾选需要禁用的设备数据')
      }
    },
    // 启用
    Enable() {
      if(this.addlist.length>0){
        if(this.addlist[0].IsEnable === 1){
          this.$message('已启用')
        }else{
          let data = { deviceID:this.checkIds[0],isEnable:1}
          startOrStopDevice(data).then(res=>{
            if (parseInt(res.Code) === 1) {
              this.$message({
                type: 'success',
                message: '启用成功!'
              })
              this.init()
            }
          })  
        }     
      }else{
        this.$message('请勾选需要启用的仓库数据')
      }
    },

    // 修改
    edit(index,row) {
      if (this.addlist.length !== 1) {
        this.$message("请勾选一项");
      }else {       
        this.editDialogVisible = true;
        getWorkStationList({keyName: this.search,page:1,pageSize:1000}).then(res => {
          if (parseInt(res.Code) === 1) {
            this.workstationList = res.Result.Items;         
          }
        })  
        this.editInfo.deviceID=this.addlist[0].DeviceId
        this.editInfo.name=this.addlist[0].Name
        this.editInfo.code=this.addlist[0].Code
        this.editInfo.deviceType=this.addlist[0].DeviceType
        this.editInfo.workstationId=this.addlist[0].WorkstationId
        this.editInfo.remark=this.addlist[0].Remark
        this.editInfo.filePath=this.addlist[0].FilePath
        this.editInfo.serviceTag=this.addlist[0].ServiceTag
      }
    },
    editSubmitForm(editForm){
      this.$refs[editForm].validate((valid) => {
        if (valid) {
          updateDevice(this.editInfo).then(res=>{
              if (parseInt(res.Code) === 1) {         
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
                this.editDialogVisible = false;
                this.init();
              }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },

    // 删除
    remove(){
      if(this.addlist.length>0){
        this.$confirm('此操作将永久删除选中的仓库数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { 
          let data = {deviceID:this.checkIds[0]}
          removeDevice(data).then(res=>{
            if(parseInt(res.Code) === 1){
              this.$message({
                type: 'success',
                message: '删除成功!' 
              }) 
              this.init()   
            } 
          })            
        }) .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });     
      }else{
        this.$message('请勾选需要删除的设备数据')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sizeBig{
    font-size: 16px;
    margin-left: 20px;
}
.topBtn{
  height: 60px;
  width: 98%;
  margin: 0 auto;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  .icon-jiny{
    display: inline-block;
    width: 12px;
    height:12px;
    margin:0 3px 2px 0;
    background: url("image/jinyong.png") no-repeat;
    vertical-align: middle;
  }
  .icon-qiy{
    display: inline-block;
    width: 13px;
    height:13px;
    margin:0 3px 2px 0;
    background: url("image/qiyong.png") no-repeat;
    vertical-align: middle;
  }
}
.message {
  width: 98%;
  margin: 0 auto;
  height: 60px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  font-size: 14px;
  .character {
    margin: 20px 0 21px 20px;
    color: #999999;
    .skip {
      color: #0095ff;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.inputcontent {
  width: 98%;
  margin: 0 auto;
  height: 80px;
  position: relative;
  padding-top: 21px;
  box-sizing: border-box;
  .iconSearch {
    position: absolute;
    left: 277px;
    top: 30px;
    width: 20px;
    height: 20px;
    background-image: url("image/搜索.png");
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .inSearch {
    width: 308px;
    height: 40px;
  }
}
.tablesize {
  width: 98%;
  // height: 485px;
  margin: 0 auto;
   // border: 1px solid #eeeeee;
  #out-table{
    border: 1px solid #eeeeee;
  }
}
.block {
  text-align: right;
  margin: 40px 20px 0 0;
}
</style>